<template>
  <div>
    <div class="box" id="printJS-form">
      <div class="printFormBox">
        <header>
          <img src="./image/logo.png" alt="">
          <p>北京久感科技有限公司<br/>{{propsName}}</p>
        </header>
        <div class="orderNo">
          <span>单号：</span>
          <input type="text" :value="data.orderNo ">
        </div>
        <div class="information">
          <div :class="item.style" v-for="item in orderHeader" :key="item.title">
            <span>{{item.title}}：</span>
            <input type="text" :value="item.value">
          </div>
        </div>
        <div class="informationContent">
          <div style="width: 98%">
            <table align='center' style="border-collapse:collapse;">
              <tr>
                <th v-for="(item,index) in tableHeader" :key="index">
                  {{item.title}}
                </th>
              </tr>
              <tr v-for="(item,index) in tableData" :key="index">
                <td>{{index+1}}</td>
                <td v-for="(items,index) in item" :key="index">{{items}}</td>
                <!-- 这个格子默认是备注-->
                <td style="border-right: 1px solid #000">
                  <input type="textarea" style="padding-left: 20px;border-bottom: 0px;width: 100%;overflow: auto" maxlength="30"/>
                </td>
              </tr>
              <tr>
                <td>备注</td>
                <td colspan="7" style="text-align: left;padding-left: 20px;">
                  <input type="textarea" style="border-bottom: 0px;width: 100%;overflow: auto" maxlength="30"/>
                </td>
              </tr>
            </table>
            <div class="informationFooter">
              <div class="footer_33" v-for="(item,index) in footerData" :key="index">
                <span>{{item.title}}：</span><input type="text" :value="item.value"
                                                   name="name">
              </div>
            </div>
          </div>
          <div class="contentRight">
            第一联存根(白) &nbsp; 第二联客户(红) &nbsp; 第三联记账(黄)
          </div>
        </div>
      </div>

    </div>

  </div>
</template>

<script>
import print from "print-js";

export default {
  data() {
    return {
      //设置打印的样式
      style: '@page {  } ' + '@media print {     .box {\n' +
        '    width: 100%;\n' +
        '    height: 100%;\n' +
        '    position: relative;\n' +
        '  }\n' +
        '\n' +
        '  .information {\n' +
        '    width: 100%;\n' +
        '    display: flex;\n' +
        '    justify-content: space-between;\n' +
        '    align-items: center;\n' +
        '    flex-wrap: wrap;\n' +
        '    box-sizing: border-box;\n' +
        '    padding: 0 2%;\n' +
        '    margin-bottom: 20px;\n' +
        '  }\n' +
        '\n' +
        '  .table_header_50 {\n' +
        '    width: 60%;\n' +
        '    height: 20px;\n' +
        '    line-height: 20px;\n' +
        '    font-size: 10px;\n' +
        '  }\n' +
        '\n' +
        '  .table_header_40 {\n' +
        '    width: 40%;\n' +
        '    height: 20px;\n' +
        '    line-height: 20px;\n' +
        '    font-size: 10px;\n' +
        '  }\n' +
        '\n' +
        '  .table_header_100 {\n' +
        '    width: 100%;\n' +
        '    height: 20px;\n' +
        '    line-height: 20px;\n' +
        '    font-size: 10px;\n' +
        '  }\n' +
        '\n' +
        '  input {\n' +
        '    border: none;\n' +
        '    border-bottom: 1px solid #000;\n' +
        '    background: transparent;\n' +
        '    font-size: 10px;\n' +
        '  }\n' +
        '\n' +
        '  .table_header_50 input {\n' +
        '    width: 71%;\n' +
        '  }\n' +
        '\n' +
        '  .table_header_40 input {\n' +
        '    width: 40%;\n' +
        '  }\n' +
        '\n' +
        '  .informationContent {\n' +
        '    width: 100%;\n' +
        '    position: relative;\n' +
        '  }\n' +
        '\n' +
        '  .contentRight {\n' +
        '    height: 100%;\n' +
        '    position: absolute;\n' +
        '    right: -10px;\n' +
        '    top: -25%;\n' +
        '    align-items: center;\n' +
        '\n' +
        '\n' +
        '    width: 30px;\n' +
        '    line-height: 14px;\n' +
        '    font-size: 10px;\n' +
        '    box-sizing: border-box;\n' +
        '    padding-left: 12px;\n' +
        '    text-align: center;\n' +
        '  }\n' +
        '\n' +
        '  .informationContent table {\n' +
        '    width: 96%\n' +
        '  }\n' +
        '\n' +
        '\n' +
        '  .informationContent table {\n' +
        '    border-right: 1px solid #000;\n' +
        '    border-bottom: 1px solid #000\n' +
        '  }\n' +
        '\n' +
        '  .informationContent table th {\n' +
        '    border-left: 1px solid #000;\n' +
        '    border-top: 1px solid #000;\n' +
        '    padding: 4px 0;\n' +
        '    font-size: 10px;\n' +
        '    font-weight: 600;\n' +
        '\n' +
        '  }\n' +
        '\n' +
        '  .informationContent table tr {\n' +
        '    padding: 0;\n' +
        '  }\n' +
        '\n' +
        '  .informationContent table td {\n' +
        '    border-left: 1px solid #000;\n' +
        '    border-top: 1px solid #000;\n' +
        '    text-align: center;\n' +
        '    padding: 4px 0;\n' +
        '    font-size: 10px;\n' +
        '  }\n' +
        '\n' +
        '  .informationFooter {\n' +
        '    width: 96%;\n' +
        '    box-sizing: border-box;\n' +
        '    padding-top: 10px;\n' +
        '    display: flex;\n' +
        '    text-align: right;\n' +
        '    align-items: center;\n' +
        '    justify-content: right;\n' +
        '  }\n' +
        '\n' +
        '  .footer_33 {\n' +
        '    width: 33%;\n' +
        '    font-size: 10px;\n' +
        '  }\n' +
        '\n' +
        '  .footer_33 input {\n' +
        '    width: 55%;\n' +
        '  }\n' +
        '\n' +
        '  .orderNo {\n' +
        '    text-align: right;\n' +
        '    margin-top: 8px;\n' +
        '  }\n' +
        '\n' +
        '  .printFormBox {\n' +
        '    width: 96%;\n' +
        '    /*text-align: center;*/\n' +
        '  }\n' +
        '\n' +
        '  .printFormBox header {\n' +
        '    width: 100%;\n' +
        '    height: 90px;\n' +
        '    vertical-align: middle;\n' +
        '    margin: auto 0;\n' +
        '    border-bottom: 10px #000 double;\n' +
        '    text-align: center;\n' +
        '    padding-bottom:  6px;\n' +
        '     box-sizing: border-box;\n' +
        '  }\n' +
        '\n' +
        '  header > p {\n' +
        '    padding:  0px;\n' +
        '    display: inline-block;;\n' +
        '    font-size: 30px;\n' +
        '    text-align: center;\n' +
        '    font-weight: 600;\n' +
        // '    line-height: 20p\n' +
        '    margin-top: -20px\n' +

        '  }\n' +
        '\n' +
        '  header > img {\n' +
        '    width: 80px;\n' +
        '    height: 64px;\n' +
        '    margin-right: 10px;\n' +

        '  }' +
        ' .table_header_arr, .table_header_100 {\n' +
        '    width: 100%;\n' +
        '    height: 20px;\n' +
        '    line-height: 20px;\n' +
        '    font-size: 10px;\n' +
        '  }\n' +
        '\n' +
        '  .table_header_arr > input {\n' +
        '    width: 80%;\n' +
        '  }',
      text: '请输入',
      purchaseData: {},
      //标题
      propsName: '',
      /*订单号*/
      //头部数据
      orderHeader: [
        //table_header_100  样式占一行 table_header_50 占据百分之50 table_header_40 占据百分之40 table_header_arr 地址的样式  具体样式可见app.vue
        {title: '头部标题', value: '标题对应内容', style: 'table_header_50'},
        {title: '头部标题2', value: '标题对应内容', style: 'table_header_arr'},
      ],
      //表单头部内容 width 动态修改th 的宽度
      tableHeader: [{title: '序号', width: '30'},],
      purchase_item: [],
      //设置表单内容
      tableData: [],
      //接受所有数据,
      data: {},
      //  底部内容
      footerData: []

    }
  }, methods: {
    //获取数据
    getData(header, tableHeader, table, footer, propsName, data) {
      this.orderHeader = header
      this.propsName = propsName
      this.tableHeader = tableHeader
      this.tableData = table
      this.data = data
      this.footerData = footer
    },
    //打印
    CreateOneFormPage() {
      this.text = ''
      print({
        printable: 'printJS-form', //div id名 指定打印谁
        type: 'html',
        headerStyle: 'margin-top:-20px',
        // targetStyles: ['border', 'padding: 15px'],
        scanStyles: false,
        style: this.style // 表格样式
      })
    },
  }
}
</script>

<!--打印弹窗界面样式,复制为打印样式时，使用注释掉的样式进行复制-->
<style>
  .box {
    width: 100%;
    height: 100%;
    position: relative;
  }
  .information {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    box-sizing: border-box;
    padding: 0 2%;
    margin-bottom: 20px;

  }
  .table_header_50 {
    width: 60%;
    height: 20px;
    line-height: 20px;
    font-size: 10px;
  }
  .table_header_40 {
    width: 40%;
    height: 20px;
    line-height: 20px;
    font-size: 10px;
  }
  .table_header_arr, .table_header_100 {
    width: 100%;
    height: 20px;
    line-height: 20px;
    font-size: 10px;
  }
  .table_header_arr > input {
    width: 80%;
  }
  input {
    border: none;
    border-bottom: 1px solid #000;
    background: transparent;
    font-size: 10px;
  }
  .table_header_50 input {
    width: 71%;
  }
  .table_header_40 input {
    width: 40%;
  }
  .informationContent {
    width: 100%;
    position: relative;
  }
  .contentRight {
    height: 100%;
    position: absolute;
    right: -10px;
    top: -25%;
    align-items: center;
    width: 30px;
    line-height: 14px;
    font-size: 10px;
    box-sizing: border-box;
    padding-left: 12px;
    text-align: center;
  }
  .informationContent table {
    width: 96%
  }
  .informationContent table {
    border-right: 1px solid #000;
    border-bottom: 1px solid #000
  }
  .informationContent table th {
    border-left: 1px solid #000;
    border-top: 1px solid #000;
    padding: 4px 0;
    font-size: 10px;
    font-weight: 600;
  }
  .informationContent table tr {
    padding: 0;
  }
  .informationContent table td {
    border-left: 1px solid #000;
    border-top: 1px solid #000;
    text-align: center;
    padding: 4px 0;
    font-size: 10px;
  }
  .informationFooter {
    width: 96%;
    box-sizing: border-box;
    padding-top: 10px;
    display: flex;
    text-align: right;
    align-items: center;
    justify-content: right;
  }
  .footer_33 {
    width: 33%;
    font-size: 10px;
  }
  .footer_33 input {
    width: 55%;
  }
  .orderNo {
    text-align: right;
  }
  .printFormBox {
    width: 96%;
    /*text-align: center;*/
  }
  .printFormBox header {
    width: 100%;
    margin: auto 0;
    border-bottom: 10px #000 double;
    text-align: center;
    padding-bottom: 10px
  }
  header > p {
    display: inline-block;;
    font-size: 30px;
    text-align: center;
    font-weight: 600;
    line-height: 40px
  }
  header > img {
    width: 100px;
    height: 80px;
    /*width: 80px;*/
    /*height: 64px;*/
    margin-right: 10px;
    margin-top: 20px;
  }
</style>


